<template>
  <div class="system-performance">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>性能优化</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="性能监控" name="performanceMonitor">
            <div class="performance-monitor-section">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ performanceStats.cpuUsage }}%</div>
                      <div class="stat-label">CPU使用率</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ performanceStats.memoryUsage }}%</div>
                      <div class="stat-label">内存使用率</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ performanceStats.diskUsage }}%</div>
                      <div class="stat-label">磁盘使用率</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ performanceStats.responseTime }}ms</div>
                      <div class="stat-label">平均响应时间</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>实时性能监控</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="monitorDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadPerformanceData"
                      />
                      <el-button @click="refreshData">刷新</el-button>
                    </div>
                  </div>
                </template>
                
                <el-tabs v-model="monitorTab">
                  <el-tab-pane label="CPU监控" name="cpu">
                    <div ref="cpuChartRef" style="width: 100%; height: 400px;"></div>
                  </el-tab-pane>
                  <el-tab-pane label="内存监控" name="memory">
                    <div ref="memoryChartRef" style="width: 100%; height: 400px;"></div>
                  </el-tab-pane>
                  <el-tab-pane label="磁盘监控" name="disk">
                    <div ref="diskChartRef" style="width: 100%; height: 400px;"></div>
                  </el-tab-pane>
                  <el-tab-pane label="网络监控" name="network">
                    <div ref="networkChartRef" style="width: 100%; height: 400px;"></div>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="瓶颈分析" name="bottleneckAnalysis">
            <div class="bottleneck-analysis-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>性能瓶颈分析</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="analysisDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadBottleneckAnalysis"
                      />
                      <el-button @click="analyzeBottlenecks">重新分析</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <div class="card-header">
                          <span>慢查询分析</span>
                        </div>
                      </template>
                      <el-table :data="slowQueries" style="width: 100%">
                        <el-table-column prop="query" label="SQL语句" />
                        <el-table-column prop="duration" label="执行时间(ms)" width="120" />
                        <el-table-column prop="count" label="执行次数" width="100" />
                        <el-table-column label="操作" width="100">
                          <template #default="scope">
                            <el-button size="small" @click="optimizeQuery(scope.row)">优化</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                  
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <div class="card-header">
                          <span>接口响应时间分析</span>
                        </div>
                      </template>
                      <el-table :data="slowApis" style="width: 100%">
                        <el-table-column prop="api" label="API接口" />
                        <el-table-column prop="avgTime" label="平均响应时间(ms)" width="150" />
                        <el-table-column prop="maxTime" label="最大响应时间(ms)" width="150" />
                        <el-table-column label="操作" width="100">
                          <template #default="scope">
                            <el-button size="small" @click="optimizeApi(scope.row)">优化</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                </el-row>
                
                <el-card style="margin-top: 20px;">
                  <template #header>
                    <div class="card-header">
                      <span>资源瓶颈分析</span>
                    </div>
                  </template>
                  <el-table :data="resourceBottlenecks" style="width: 100%">
                    <el-table-column prop="resource" label="资源类型" width="150" />
                    <el-table-column prop="usage" label="使用率" width="100">
                      <template #default="scope">
                        <el-progress :percentage="scope.row.usage" :status="getUsageStatus(scope.row.usage)" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="peakTime" label="峰值时间" width="180" />
                    <el-table-column prop="recommendation" label="优化建议" />
                    <el-table-column label="操作" width="100">
                      <template #default="scope">
                        <el-button size="small" @click="applyRecommendation(scope.row)">应用</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="优化建议" name="optimizationSuggestions">
            <div class="optimization-suggestions-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>系统优化建议</span>
                    <div class="header-actions">
                      <el-button type="primary" @click="generateSuggestions">重新生成建议</el-button>
                    </div>
                  </div>
                </template>
                
                <el-tabs v-model="suggestionTab">
                  <el-tab-pane label="数据库优化" name="database">
                    <el-card 
                      v-for="suggestion in databaseSuggestions" 
                      :key="suggestion.id"
                      class="suggestion-card"
                      :class="{ 'applied': suggestion.applied }"
                    >
                      <template #header>
                        <div class="card-header">
                          <span>{{ suggestion.title }}</span>
                          <el-tag :type="suggestion.applied ? 'success' : 'warning'">
                            {{ suggestion.applied ? '已应用' : '待处理' }}
                          </el-tag>
                        </div>
                      </template>
                      <div class="suggestion-content">
                        <div class="suggestion-description">
                          <p>{{ suggestion.description }}</p>
                        </div>
                        <div class="suggestion-details">
                          <el-descriptions :column="1" border>
                            <el-descriptions-item label="预期效果">{{ suggestion.expectedEffect }}</el-descriptions-item>
                            <el-descriptions-item label="实施难度">{{ suggestion.difficulty }}</el-descriptions-item>
                            <el-descriptions-item label="预计时间">{{ suggestion.estimatedTime }}</el-descriptions-item>
                          </el-descriptions>
                        </div>
                        <div class="suggestion-actions">
                          <el-button 
                            v-if="!suggestion.applied"
                            type="primary" 
                            @click="applySuggestion(suggestion)"
                          >
                            应用建议
                          </el-button>
                          <el-button @click="viewSuggestionDetails(suggestion)">查看详情</el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-tab-pane>
                  
                  <el-tab-pane label="代码优化" name="code">
                    <el-card 
                      v-for="suggestion in codeSuggestions" 
                      :key="suggestion.id"
                      class="suggestion-card"
                      :class="{ 'applied': suggestion.applied }"
                    >
                      <template #header>
                        <div class="card-header">
                          <span>{{ suggestion.title }}</span>
                          <el-tag :type="suggestion.applied ? 'success' : 'warning'">
                            {{ suggestion.applied ? '已应用' : '待处理' }}
                          </el-tag>
                        </div>
                      </template>
                      <div class="suggestion-content">
                        <div class="suggestion-description">
                          <p>{{ suggestion.description }}</p>
                        </div>
                        <div class="suggestion-details">
                          <el-descriptions :column="1" border>
                            <el-descriptions-item label="预期效果">{{ suggestion.expectedEffect }}</el-descriptions-item>
                            <el-descriptions-item label="实施难度">{{ suggestion.difficulty }}</el-descriptions-item>
                            <el-descriptions-item label="预计时间">{{ suggestion.estimatedTime }}</el-descriptions-item>
                          </el-descriptions>
                        </div>
                        <div class="suggestion-actions">
                          <el-button 
                            v-if="!suggestion.applied"
                            type="primary" 
                            @click="applySuggestion(suggestion)"
                          >
                            应用建议
                          </el-button>
                          <el-button @click="viewSuggestionDetails(suggestion)">查看详情</el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-tab-pane>
                  
                  <el-tab-pane label="架构优化" name="architecture">
                    <el-card 
                      v-for="suggestion in architectureSuggestions" 
                      :key="suggestion.id"
                      class="suggestion-card"
                      :class="{ 'applied': suggestion.applied }"
                    >
                      <template #header>
                        <div class="card-header">
                          <span>{{ suggestion.title }}</span>
                          <el-tag :type="suggestion.applied ? 'success' : 'warning'">
                            {{ suggestion.applied ? '已应用' : '待处理' }}
                          </el-tag>
                        </div>
                      </template>
                      <div class="suggestion-content">
                        <div class="suggestion-description">
                          <p>{{ suggestion.description }}</p>
                        </div>
                        <div class="suggestion-details">
                          <el-descriptions :column="1" border>
                            <el-descriptions-item label="预期效果">{{ suggestion.expectedEffect }}</el-descriptions-item>
                            <el-descriptions-item label="实施难度">{{ suggestion.difficulty }}</el-descriptions-item>
                            <el-descriptions-item label="预计时间">{{ suggestion.estimatedTime }}</el-descriptions-item>
                          </el-descriptions>
                        </div>
                        <div class="suggestion-actions">
                          <el-button 
                            v-if="!suggestion.applied"
                            type="primary" 
                            @click="applySuggestion(suggestion)"
                          >
                            应用建议
                          </el-button>
                          <el-button @click="viewSuggestionDetails(suggestion)">查看详情</el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="容量规划" name="capacityPlanning">
            <div class="capacity-planning-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>容量规划</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="planningDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadCapacityPlanning"
                      />
                      <el-button @click="generatePlan">生成规划</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-card class="planning-card">
                      <template #header>
                        <div class="card-header">
                          <span>用户增长预测</span>
                        </div>
                      </template>
                      <div ref="userGrowthChartRef" style="width: 100%; height: 300px;"></div>
                      <div class="planning-info">
                        <p>预计3个月后用户数: {{ capacityStats.userCount3m }}</p>
                        <p>预计6个月后用户数: {{ capacityStats.userCount6m }}</p>
                        <p>预计12个月后用户数: {{ capacityStats.userCount12m }}</p>
                      </div>
                    </el-card>
                  </el-col>
                  
                  <el-col :span="8">
                    <el-card class="planning-card">
                      <template #header>
                        <div class="card-header">
                          <span>资源需求预测</span>
                        </div>
                      </template>
                      <div ref="resourceChartRef" style="width: 100%; height: 300px;"></div>
                      <div class="planning-info">
                        <p>推荐CPU核心数: {{ capacityStats.recommendedCpu }}</p>
                        <p>推荐内存大小: {{ capacityStats.recommendedMemory }}GB</p>
                        <p>推荐存储空间: {{ capacityStats.recommendedStorage }}TB</p>
                      </div>
                    </el-card>
                  </el-col>
                  
                  <el-col :span="8">
                    <el-card class="planning-card">
                      <template #header>
                        <div class="card-header">
                          <span>成本预算</span>
                        </div>
                      </template>
                      <div ref="costChartRef" style="width: 100%; height: 300px;"></div>
                      <div class="planning-info">
                        <p>当前月成本: ¥{{ capacityStats.currentCost }}</p>
                        <p>3个月后预估: ¥{{ capacityStats.cost3m }}</p>
                        <p>6个月后预估: ¥{{ capacityStats.cost6m }}</p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                
                <el-card style="margin-top: 20px;">
                  <template #header>
                    <div class="card-header">
                      <span>扩容建议</span>
                    </div>
                  </template>
                  <el-table :data="expansionSuggestions" style="width: 100%">
                    <el-table-column prop="resource" label="资源类型" width="150" />
                    <el-table-column prop="current" label="当前配置" width="150" />
                    <el-table-column prop="recommended" label="推荐配置" width="150" />
                    <el-table-column prop="urgency" label="紧急程度" width="100">
                      <template #default="scope">
                        <el-tag :type="getUrgencyType(scope.row.urgency)">
                          {{ scope.row.urgency }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="deadline" label="建议完成时间" width="180" />
                    <el-table-column label="操作" width="150">
                      <template #default="scope">
                        <el-button size="small" @click="implementExpansion(scope.row)">实施</el-button>
                        <el-button size="small" type="primary" @click="viewExpansionDetails(scope.row)">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 响应式数据
const activeTab = ref('performanceMonitor')
const monitorTab = ref('cpu')
const suggestionTab = ref('database')
const monitorDateRange = ref([])
const analysisDateRange = ref([])
const planningDateRange = ref([])

// 图表引用
const cpuChartRef = ref<HTMLElement | null>(null)
const memoryChartRef = ref<HTMLElement | null>(null)
const diskChartRef = ref<HTMLElement | null>(null)
const networkChartRef = ref<HTMLElement | null>(null)
const userGrowthChartRef = ref<HTMLElement | null>(null)
const resourceChartRef = ref<HTMLElement | null>(null)
const costChartRef = ref<HTMLElement | null>(null)

// 性能统计数据
const performanceStats = ref({
  cpuUsage: 45,
  memoryUsage: 68,
  diskUsage: 32,
  responseTime: 125
})

// 容量规划统计数据
const capacityStats = ref({
  userCount3m: '1,850',
  userCount6m: '2,400',
  userCount12m: '3,600',
  recommendedCpu: 16,
  recommendedMemory: 64,
  recommendedStorage: 2,
  currentCost: '15,000',
  cost3m: '18,500',
  cost6m: '22,000'
})

// 慢查询数据
const slowQueries = ref([
  {
    query: 'SELECT * FROM users WHERE name LIKE "%admin%"',
    duration: 1250,
    count: 45
  },
  {
    query: 'SELECT * FROM orders WHERE created_at > "2023-01-01"',
    duration: 890,
    count: 120
  }
])

// 慢接口数据
const slowApis = ref([
  {
    api: '/api/v1/users/list',
    avgTime: 850,
    maxTime: 1200
  },
  {
    api: '/api/v1/orders/statistics',
    avgTime: 650,
    maxTime: 980
  }
])

// 资源瓶颈数据
const resourceBottlenecks = ref([
  {
    resource: '数据库连接池',
    usage: 85,
    peakTime: '2023-06-15 14:30:22',
    recommendation: '增加连接池大小至50'
  },
  {
    resource: '内存缓存',
    usage: 92,
    peakTime: '2023-06-15 10:15:33',
    recommendation: '扩容缓存服务器内存'
  }
])

// 数据库优化建议
const databaseSuggestions = ref([
  {
    id: 1,
    title: '优化用户表索引',
    description: '为用户表的name字段添加索引，提升查询性能',
    expectedEffect: '查询性能提升60%',
    difficulty: '简单',
    estimatedTime: '2小时',
    applied: false
  },
  {
    id: 2,
    title: '分表处理订单数据',
    description: '将订单表按月份进行分表，减少单表数据量',
    expectedEffect: '查询性能提升40%，存储效率提升30%',
    difficulty: '复杂',
    estimatedTime: '3天',
    applied: true
  }
])

// 代码优化建议
const codeSuggestions = ref([
  {
    id: 3,
    title: '优化API响应数据结构',
    description: '减少不必要的字段返回，压缩响应数据大小',
    expectedEffect: '网络传输减少30%，响应时间减少20%',
    difficulty: '中等',
    estimatedTime: '1天',
    applied: false
  }
])

// 架构优化建议
const architectureSuggestions = ref([
  {
    id: 4,
    title: '引入Redis缓存',
    description: '为热点数据引入Redis缓存，减少数据库压力',
    expectedEffect: '数据库压力减少50%，系统响应提升40%',
    difficulty: '复杂',
    estimatedTime: '1周',
    applied: false
  }
])

// 扩容建议
const expansionSuggestions = ref([
  {
    resource: 'CPU核心数',
    current: '8核',
    recommended: '16核',
    urgency: '高',
    deadline: '2023-07-15'
  },
  {
    resource: '内存容量',
    current: '32GB',
    recommended: '64GB',
    urgency: '中',
    deadline: '2023-08-01'
  }
])

// 方法
const loadPerformanceData = () => {
  ElMessage.info('加载性能监控数据')
  initPerformanceCharts()
}

const refreshData = () => {
  ElMessage.info('刷新性能数据')
  // 模拟数据更新
  performanceStats.value.cpuUsage = Math.floor(Math.random() * 100)
  performanceStats.value.memoryUsage = Math.floor(Math.random() * 100)
  performanceStats.value.diskUsage = Math.floor(Math.random() * 100)
  performanceStats.value.responseTime = Math.floor(Math.random() * 200) + 50
}

const loadBottleneckAnalysis = () => {
  ElMessage.info('加载瓶颈分析数据')
}

const analyzeBottlenecks = () => {
  ElMessage.info('重新分析性能瓶颈')
  // 模拟分析过程
  setTimeout(() => {
    ElMessage.success('性能瓶颈分析完成')
  }, 2000)
}

const optimizeQuery = (row: any) => {
  ElMessage.success(`已优化SQL查询: ${row.query.substring(0, 30)}...`)
}

const optimizeApi = (row: any) => {
  ElMessage.success(`已优化API接口: ${row.api}`)
}

const applyRecommendation = (row: any) => {
  ElMessage.success(`已应用优化建议: ${row.recommendation}`)
}

const generateSuggestions = () => {
  ElMessage.info('重新生成优化建议')
  // 模拟生成过程
  setTimeout(() => {
    ElMessage.success('优化建议生成完成')
  }, 1500)
}

const applySuggestion = (suggestion: any) => {
  ElMessage.success(`已应用建议: ${suggestion.title}`)
  suggestion.applied = true
}

const viewSuggestionDetails = (suggestion: any) => {
  ElMessage.info(`查看建议详情: ${suggestion.title}`)
}

const loadCapacityPlanning = () => {
  ElMessage.info('加载容量规划数据')
  initPlanningCharts()
}

const generatePlan = () => {
  ElMessage.info('生成容量规划')
  // 模拟生成过程
  setTimeout(() => {
    ElMessage.success('容量规划生成完成')
  }, 2000)
}

const implementExpansion = (row: any) => {
  ElMessage.success(`已实施扩容: ${row.resource}`)
}

const viewExpansionDetails = (row: any) => {
  ElMessage.info(`查看扩容详情: ${row.resource}`)
}

// 图表初始化方法
const initPerformanceCharts = () => {
  // CPU图表
  if (cpuChartRef.value) {
    const cpuChart = echarts.init(cpuChartRef.value)
    cpuChart.setOption({
      title: { text: 'CPU使用率趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] },
      yAxis: { type: 'value' },
      series: [{ data: [30, 45, 50, 40, 60, 55, 45], type: 'line', smooth: true }]
    })
  }
  
  // 内存图表
  if (memoryChartRef.value) {
    const memoryChart = echarts.init(memoryChartRef.value)
    memoryChart.setOption({
      title: { text: '内存使用率趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] },
      yAxis: { type: 'value' },
      series: [{ data: [50, 65, 70, 60, 68, 72, 65], type: 'line', smooth: true }]
    })
  }
  
  // 磁盘图表
  if (diskChartRef.value) {
    const diskChart = echarts.init(diskChartRef.value)
    diskChart.setOption({
      title: { text: '磁盘使用率趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] },
      yAxis: { type: 'value' },
      series: [{ data: [20, 25, 30, 28, 32, 35, 32], type: 'line', smooth: true }]
    })
  }
  
  // 网络图表
  if (networkChartRef.value) {
    const networkChart = echarts.init(networkChartRef.value)
    networkChart.setOption({
      title: { text: '网络流量趋势' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] },
      yAxis: { type: 'value' },
      series: [
        { name: '入站流量', data: [100, 150, 200, 180, 220, 250, 200], type: 'line', smooth: true },
        { name: '出站流量', data: [80, 120, 160, 140, 180, 200, 160], type: 'line', smooth: true }
      ]
    })
  }
}

const initPlanningCharts = () => {
  // 用户增长图表
  if (userGrowthChartRef.value) {
    const userGrowthChart = echarts.init(userGrowthChartRef.value)
    userGrowthChart.setOption({
      title: { text: '用户增长预测' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['当前', '3个月', '6个月', '12个月'] },
      yAxis: { type: 'value' },
      series: [{ data: [1500, 1850, 2400, 3600], type: 'bar' }]
    })
  }
  
  // 资源需求图表
  if (resourceChartRef.value) {
    const resourceChart = echarts.init(resourceChartRef.value)
    resourceChart.setOption({
      title: { text: '资源需求预测' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['CPU(核)', '内存(GB)', '存储(TB)'] },
      yAxis: { type: 'value' },
      series: [{ data: [16, 64, 2], type: 'bar' }]
    })
  }
  
  // 成本预算图表
  if (costChartRef.value) {
    const costChart = echarts.init(costChartRef.value)
    costChart.setOption({
      title: { text: '成本预算预测' },
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['当前', '3个月', '6个月'] },
      yAxis: { type: 'value' },
      series: [{ data: [15000, 18500, 22000], type: 'line', smooth: true }]
    })
  }
}

// 工具方法
const getUsageStatus = (usage: number) => {
  if (usage > 90) return 'exception'
  if (usage > 70) return 'warning'
  return 'success'
}

const getUrgencyType = (urgency: string) => {
  switch (urgency) {
    case '高': return 'danger'
    case '中': return 'warning'
    case '低': return 'success'
    default: return 'info'
  }
}

// 组件挂载时初始化图表
onMounted(() => {
  loadPerformanceData()
  loadCapacityPlanning()
})
</script>

<style scoped>
.system-performance {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.suggestion-card {
  margin-bottom: 20px;
}

.suggestion-card.applied {
  opacity: 0.7;
}

.suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.suggestion-description p {
  margin: 0;
  line-height: 1.6;
}

.suggestion-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.planning-info p {
  margin: 5px 0;
  font-size: 14px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>